<template>
  <!-- 基础配置页面 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-button type="primary" round @click="addBaseConfig">新增</el-button>
    </div>
    <!-- 表单 -->
    <div class="table_content">
      <el-table :data="baseConfigData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <!-- 名称 -->
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column label="值">
          <template slot-scope="scope">
            <el-image
              v-if="judgeHandler(scope.row.val) == true"
              style="width: 40px; height: 40px"
              :src="scope.row.val"
              :preview-src-list="[scope.row.val]"
            >
            </el-image>
            <input
              v-else
              type="text"
              style="border: none"
              readonly
              :value="scope.row.val"
            />
          </template>
        </el-table-column>
        <!-- 介绍 -->
        <el-table-column prop="introduce" label="介绍" align="center">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editBaseConfig(scope.row)"
              type="success"
              size="small"
              round
              plain
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              round
              plain
              @click="deleteBaseConfig(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @click="dialogClose"
    >
      <!-- 表单区域 -->
      <el-form :model="baseConfigForm" :rules="rules" ref="baseConfig_Form">
        <!-- 产品名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="baseConfigForm.name"></el-input>
        </el-form-item>
        <!-- 介绍 -->
        <el-form-item label="介绍" prop="introduce">
          <el-input v-model="baseConfigForm.introduce"></el-input>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="类型">
          <el-select
            v-model="baseConfigForm.region"
            placeholder="请选择上传类型"
          >
            <el-option label="文字" value="文字"></el-option>
            <el-option label="图片" value="图片"></el-option>
          </el-select>
        </el-form-item>
        <!-- 值 -->
        <el-form-item label="值">
          <el-upload
            v-if="baseConfigForm.region == '图片'"
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="baseConfigForm.val" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-input
            v-else
            v-model="baseConfigForm.val"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后调用重置表单方法 -->
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { showFileURL, uploadFileURL } from "@/utils/config";

export default {
  data() {
    return {
      imageUrl: "",
      uploadFileURL,
      baseConfigData: [],
      baseConfigForm: {
        name: "",
        introduce: "",
        region: "",
        val: "",
        id: "",
      },
      dialogTitle: "",
      dialogVisible: false,
      rules: {
        //名称
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        //介绍
        introduce: [
          { required: true, message: "请输入介绍", trigger: "change" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    //获取全部配置信息
    async getAllBaseConfigData() {
      let res = await get("/baseConfig/findAll");
      // console.log(res);
      this.baseConfigData = res.data;
    },
    //新增配置
    addBaseConfig() {
      this.dialogTitle = "新增配置";
      this.dialogVisible = true;
      this.baseConfigForm = {};
    },
    //编辑配置
    editBaseConfig(row) {
      this.baseConfigForm.id = row.id;
      this.baseConfigForm.name = row.name;
      this.baseConfigForm.val = row.val;
      this.baseConfigForm.introduce = row.introduce;
      if (this.judgeHandler(row.val) == true) {
        this.baseConfigForm.region = "图片";
      } else {
        this.baseConfigForm.region = "文字";
      }
      this.imageUrl = this.baseConfigForm.val;
      this.dialogTitle = "编辑配置";
      this.dialogVisible = true;
    },
    async deleteBaseConfig(id) {
      let res = await get("/baseConfig/deleteById", { id });
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        //刷新页面
        this.getAllBaseConfigData();
      } else {
        this.$message.error(res.message);
      }
    },
    //判断模态框中val值是文字还是图片
    judgeHandler(val) {
      var bool;
      var sub = val.substring(val.lastIndexOf(".") + 1, val.length);
      if (sub === "jpg" || sub === "jpeg" || sub === "png" || sub == "gif") {
        bool = true;
      } else {
        bool = false;
      }
      return bool;
    },
    dialogClose() {
      this.$refs["baseConfig_Form"].resetFields();
      setTimeout(() => {
        this.dialogVisible = false;
      }, 200);
    },
    //提交表单
    submitForm() {
      this.$refs["baseConfig_Form"].validate(async (valid) => {
        if (valid) {
          let res = await post("/baseConfig/saveOrUpdate", this.baseConfigForm);
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            //刷新页面
            this.getAllBaseConfigData();
            this.dialogClose();
          } else {
            this.$message.error(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上传成功后调用方法
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res);
      //上传成功后更新productForm.photo的路径
      this.baseConfigForm.val = showFileURL + res.data.id;
    },
    //上传之前要做的限制
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
  },
  created() {
    this.getAllBaseConfigData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>